<template>
	<view class="geren-page">
		<!-- 顶部用户信息区域 -->
		<view class="user-info-section" :class="{ 'logged-in': isLoggedIn }">
			<view class="user-avatar-container" @click="handleAvatarClick">
				<image :src="userInfo.avatar" class="user-avatar" mode="aspectFill"></image>
				<view class="online-dot" v-if="isLoggedIn && userInfo.isOnline"></view>
			</view>
			
			<view class="user-welcome" v-if="!isLoggedIn">
				<text class="welcome-text">HI~欢迎回来</text>
				<text class="login-prompt" @click="goToLogin">登录</text>
			</view>
			
			<view class="user-details" v-else>
				<text class="user-name">{{ userInfo.userName || '用户' }}</text>
				<text class="user-desc">{{ userInfo.description || '这个人很懒，什么都没写' }}</text>
			</view>
			
			<view class="user-stats" v-if="isLoggedIn">
				<view class="stat-item" @click="navigateTo('follow')">
					<text class="stat-number">{{ userInfo.followCount || 0 }}</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-item" @click="navigateTo('topic')">
					<text class="stat-number">{{ userInfo.topicCount || 0 }}</text>
					<text class="stat-label">话题</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单区域 -->
		<view class="function-menu">
			<view class="menu-grid">
				<view class="menu-item" @click="navigateTo('favorites')">
					<view class="menu-icon">❤</view>
					<text class="menu-text">收藏</text>
					<text class="menu-badge" v-if="favoritesCount > 0">{{ favoritesCount }}</text>
				</view>
				
				<view class="menu-item" @click="navigateTo('history')">
					<view class="menu-icon">📚</view>
					<text class="menu-text">历史</text>
					<text class="menu-badge" v-if="historyCount > 0">{{ historyCount > 99 ? '99+' : historyCount }}</text>
				</view>
				
				<view class="menu-item" @click="navigateTo('settings')">
					<view class="menu-icon">⚙</view>
					<text class="menu-text">设置</text>
				</view>

				<view class="menu-item" @click="navigateTo('feedback')">
					<view class="menu-icon">💬</view>
					<text class="menu-text">反馈</text>
				</view>
			</view>
		</view>

		<!-- 收藏列表（登录后显示） -->
		<view class="content-section" v-if="isLoggedIn && favoritesList.length > 0">
			<view class="section-header">
				<text class="section-title">我的收藏</text>
				<text class="section-more" @click="navigateTo('favorites')">查看更多</text>
			</view>
			
			<view class="content-list">
				<view v-for="item in favoritesList.slice(0, 3)" :key="item.id" 
					class="content-item" @click="viewContent(item)">
					<view class="item-content">
						<text class="item-title">{{ item.title }}</text>
						<view class="item-meta-container">
							<text class="item-source">{{ item.source }}</text>
							<text class="item-time">{{ formatTime(item.time) }}</text>
						</view>
					</view>
					<image v-if="item.hasImage" :src="getImageUrl(item.imageUrl)" 
						class="item-image" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 浏览历史（登录后显示） -->
		<view class="content-section" v-if="isLoggedIn && historyList.length > 0">
			<view class="section-header">
				<text class="section-title">最近浏览</text>
				<text class="section-more" @click="navigateTo('history')">查看更多({{ historyCount }})</text>
			</view>
			
			<view class="content-list">
				<view v-for="(item, index) in historyList.slice(0, 3)" :key="index" 
					class="content-item" @click="viewContent(item)">
					<view class="item-content">
						<text class="item-title">{{ item.title }}</text>
						<view class="item-meta-container">
							<text class="item-source">{{ item.source }}</text>
							<text class="item-time">{{ formatBrowseTime(item.browseTime) }}</text>
						</view>
					</view>
					<image v-if="item.hasImage" :src="getImageUrl(item.imageUrl)" 
						class="item-image" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-section" v-if="isLoggedIn && loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 空状态提示 -->
		<view class="empty-section" v-if="isLoggedIn && !loading && historyList.length === 0 && favoritesList.length === 0">
			<text class="empty-icon">📝</text>
			<text class="empty-text">暂无内容</text>
			<text class="empty-desc">快去浏览一些内容吧</text>
		</view>

		<!-- 未登录提示 -->
		<view class="login-prompt-section" v-if="!isLoggedIn">
			<text class="prompt-icon">🔐</text>
			<text class="prompt-text">登录后查看收藏和历史记录</text>
			<button class="prompt-btn" @click="goToLogin">立即登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 3,
				isLoggedIn: false,
				loading: false,
				userInfo: {
					userName: '',
					avatar: '/static/avatars/default-avatar.png',
					description: '',
					followCount: 0,
					topicCount: 0,
					isOnline: false
				},
				favoritesList: [],
				historyList: []
			}
		},
		
		computed: {
			favoritesCount() {
				return this.favoritesList.length;
			},
			
			historyCount() {
				return this.historyList.length;
			}
		},
		
		onLoad() {
			this.checkLoginStatus();
		},
		
		onShow() {
			this.checkLoginStatus();
		},
		
		onPullDownRefresh() {
			this.refreshData();
		},
		
		methods: {
			// 检查登录状态
			async checkLoginStatus() {
				const userInfo = uni.getStorageSync('currentUser');
				const token = uni.getStorageSync('authToken');
				
				if (userInfo && token) {
					this.isLoggedIn = true;
					this.userInfo = { 
						...this.userInfo, 
						...userInfo, 
						userName: userInfo.username || '用户',
						isOnline: true 
					};
					await this.loadUserData();
				} else {
					this.isLoggedIn = false;
					this.userInfo = {
						userName: '',
						avatar: '/static/avatars/default-avatar.png',
						description: '',
						followCount: 0,
						topicCount: 0,
						isOnline: false
					};
					this.favoritesList = [];
					this.historyList = [];
				}
			},
			
			// 加载用户数据
			async loadUserData() {
				if (!this.isLoggedIn) return;
				
				this.loading = true;
				
				try {
					// 模拟加载延迟
					await new Promise(resolve => setTimeout(resolve, 500));
					
					// 加载收藏列表
					const favorites = uni.getStorageSync('userFavorites') || [];
					this.favoritesList = favorites;
					
					// 加载浏览历史
					const userInfo = uni.getStorageSync('currentUser');
					if (userInfo && userInfo.id) {
						const historyKey = `userHistory_${userInfo.id}`;
						const history = uni.getStorageSync(historyKey) || [];
						// 按时间倒序排列
						this.historyList = history.sort((a, b) => {
							return new Date(b.browseTime || b.time) - new Date(a.browseTime || a.time);
						});
					}
				} catch (error) {
					console.error('加载用户数据失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			// 刷新数据
			async refreshData() {
				await this.loadUserData();
				uni.stopPullDownRefresh();
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			},
			
			// 处理头像点击
			handleAvatarClick() {
				if (!this.isLoggedIn) {
					this.goToLogin();
				} else {
					// 已登录状态，可以跳转到个人资料编辑页
					uni.navigateTo({
						url: '/pages/geren/edit-profile'
					});
				}
			},
			
			// 跳转到登录页
			goToLogin() {
				// 记录当前页面路径，用于登录后返回
				uni.setStorageSync('loginRedirect', '/pages/geren/geren');
				
				// 修改为新的登录页面路径
				uni.navigateTo({
					url: '/pages/components/login/login?from=geren'
				});
			},
			
			// 导航到不同页面
			navigateTo(page) {
				if (!this.isLoggedIn) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '去登录',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.goToLogin();
							}
						}
					});
					return;
				}
				
				const routes = {
					'follow': '/pages/geren/follow',
					'topic': '/pages/geren/my-topics',
					'favorites': '/pages/geren/favorites',
					'history': '/pages/geren/history',
					'settings': '/pages/geren/settings',
					'feedback': '/pages/geren/feedback'
				};
				
				if (routes[page]) {
					uni.navigateTo({
						url: routes[page]
					});
				}
			},
			
			// 查看内容详情
			viewContent(item) {
				if (!this.isLoggedIn) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '去登录',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.goToLogin();
							}
						}
					});
					return;
				}
				
				// 记录浏览历史
				this.recordBrowseHistory(item);
				
				// 跳转到内容详情页
				const newsData = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/news-detail/news-detail?newsData=${newsData}`
				});
			},
			
			// 记录浏览历史
			recordBrowseHistory(newsItem) {
				if (!this.isLoggedIn) return;
				
				const userInfo = uni.getStorageSync('currentUser');
				if (!userInfo || !userInfo.id) return;
				
				const historyKey = `userHistory_${userInfo.id}`;
				let historyList = uni.getStorageSync(historyKey) || [];
				
				// 检查是否已存在相同新闻，避免重复
				const existingIndex = historyList.findIndex(item => item.id === newsItem.id);
				if (existingIndex !== -1) {
					// 如果已存在，移到最前面并更新时间
					historyList.splice(existingIndex, 1);
				}
				
				// 添加浏览时间
				const historyItem = {
					...newsItem,
					browseTime: new Date().toISOString(),
					browseTimestamp: Date.now()
				};
				
				// 添加到开头
				historyList.unshift(historyItem);
				
				// 限制历史记录数量（最多50条）
				if (historyList.length > 50) {
					historyList = historyList.slice(0, 50);
				}
				
				// 保存到本地存储
				uni.setStorageSync(historyKey, historyList);
				
				// 更新页面数据
				this.historyList = historyList;
			},
			
			// 时间格式化
			formatTime(timeString) {
				if (!timeString) return '';
				const time = new Date(timeString);
				const now = new Date();
				const diffMs = now - time;
				const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
				
				if (diffDays === 0) {
					// 今天
					return '今天';
				} else if (diffDays === 1) {
					// 昨天
					return '昨天';
				} else if (diffDays < 7) {
					// 一周内
					return `${diffDays}天前`;
				} else {
					return time.toLocaleDateString().slice(5);
				}
			},
			
			// 浏览时间格式化
			formatBrowseTime(timeString) {
				if (!timeString) return '';
				
				const browseTime = new Date(timeString);
				const now = new Date();
				const diffMs = now - browseTime;
				const diffMins = Math.floor(diffMs / (1000 * 60));
				const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
				const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
				
				if (diffMins < 1) {
					return '刚刚';
				} else if (diffMins < 60) {
					return `${diffMins}分钟前`;
				} else if (diffHours < 24) {
					return `${diffHours}小时前`;
				} else if (diffDays < 7) {
					return `${diffDays}天前`;
				} else {
					return browseTime.toLocaleDateString().slice(5);
				}
			},
			
			// 获取图片URL
			getImageUrl(filename) {
				if (!filename) return '/static/images/default-news.jpg';
				return `/static/${filename}`;
			}
		}
	}
</script>

<style scoped>
.geren-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
    min-height: 100vh;
    padding-bottom: 40rpx;
}

/* 顶部用户信息区域 */
.user-info-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60rpx 40rpx 40rpx;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 30rpx 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.2);
}

.user-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><circle cx="20" cy="20" r="15" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="80" cy="80" r="10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
    opacity: 0.2;
}

.user-info-section.logged-in {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.user-info-section:not(.logged-in) {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
}

.user-avatar-container {
    position: relative;
    margin-right: 30rpx;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    padding: 4rpx;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10rpx);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.user-avatar-container:active {
    transform: scale(0.95);
}

.user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
}

.online-dot {
    position: absolute;
    bottom: 12rpx;
    right: 12rpx;
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background: #4caf50;
    border: 3rpx solid #fff;
    box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.8);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.user-welcome {
    flex: 1;
    padding: 20rpx 0;
}

.welcome-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    display: block;
    margin-bottom: 16rpx;
    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.login-prompt {
    font-size: 28rpx;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    padding: 12rpx 30rpx;
    border-radius: 30rpx;
    backdrop-filter: blur(10rpx);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    display: inline-block;
    transition: all 0.3s ease;
}

.login-prompt:active {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2rpx);
}

.user-details {
    flex: 1;
    padding: 20rpx 0;
}

.user-name {
    font-size: 40rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 12rpx;
    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.user-desc {
    font-size: 28rpx;
    opacity: 0.9;
    display: block;
    line-height: 1.4;
    text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.user-stats {
    display: flex;
    margin-left: 20rpx;
    gap: 40rpx;
    background: rgba(255, 255, 255, 0.1);
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
    backdrop-filter: blur(10rpx);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.stat-item:active {
    transform: scale(0.95);
}

.stat-number {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.stat-label {
    font-size: 24rpx;
    margin-top: 8rpx;
    opacity: 0.9;
    text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 功能菜单区域 */
.function-menu {
    background: #fff;
    margin: 20rpx 20rpx 30rpx;
    border-radius: 20rpx;
    padding: 30rpx 0;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.function-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

.menu-grid {
    display: flex;
    justify-content: space-around;
    padding: 0 20rpx;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20rpx 10rpx;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 1;
}

.menu-item:active {
    transform: translateY(-4rpx);
}

.menu-icon {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 25rpx;
    margin-bottom: 20rpx;
    font-size: 44rpx;
    color: #fff;
    box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.menu-item:active .menu-icon {
    transform: scale(1.1);
    box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
}

.menu-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.menu-item:active .menu-text {
    color: #667eea;
}

.menu-badge {
    position: absolute;
    top: 10rpx;
    right: 0;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
    color: #fff;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    min-width: 40rpx;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.3);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4rpx); }
}

/* 内容区域 */
.content-section {
    background: #fff;
    margin: 0 20rpx 20rpx;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-section:active {
    transform: translateY(-2rpx);
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.1);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.section-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 30rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4rpx;
}

.section-more {
    font-size: 24rpx;
    color: #999;
    display: flex;
    align-items: center;
    gap: 8rpx;
    transition: color 0.3s ease;
    cursor: pointer;
}

.section-more:active {
    color: #667eea;
}

.section-more::after {
    content: '›';
    font-size: 28rpx;
}

.content-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.content-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12rpx;
    padding: 20rpx;
}

.content-item:active {
    background: #f8f9ff;
    transform: translateX(4rpx);
}

.content-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.item-content {
    flex: 1;
    margin-right: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-title {
    font-size: 30rpx;
    color: #333;
    line-height: 1.4;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 20rpx;
    transition: color 0.3s ease;
}

.content-item:active .item-title {
    color: #667eea;
}

.item-meta-container {
    display: flex;
    align-items: center;
    gap: 20rpx;
    font-size: 24rpx;
    color: #999;
}

.item-source {
    padding-right: 20rpx;
    border-right: 1rpx solid #e0e0e0;
}

.item-time {
    padding-left: 0;
}

.item-image {
    width: 200rpx;
    height: 140rpx;
    border-radius: 12rpx;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.content-item:active .item-image {
    transform: scale(1.05);
}

/* 加载状态 */
.loading-section {
    background: #fff;
    padding: 100rpx 30rpx;
    text-align: center;
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
}

.loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #f0f0f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 28rpx;
    color: #666;
}

/* 空状态提示 */
.empty-section {
    background: #fff;
    padding: 100rpx 30rpx;
    text-align: center;
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
}

.empty-icon {
    font-size: 100rpx;
    opacity: 0.3;
    display: block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20rpx); }
}

.empty-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    display: block;
}

.empty-desc {
    font-size: 28rpx;
    color: #999;
    line-height: 1.4;
}

/* 未登录提示 */
.login-prompt-section {
    background: #fff;
    padding: 100rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20rpx;
    text-align: center;
    border-radius: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
    gap: 20rpx;
}

.prompt-icon {
    font-size: 100rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    animation: pulse 2s infinite;
}

.prompt-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
    line-height: 1.4;
}

.prompt-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 20rpx 60rpx;
    border-radius: 50rpx;
    font-size: 28rpx;
    font-weight: 500;
    box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.prompt-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.prompt-btn:active {
    transform: translateY(-2rpx);
    box-shadow: 0 12rpx 30rpx rgba(102, 126, 234, 0.4);
}

.prompt-btn:active::after {
    opacity: 1;
}

/* 响应式调整 */
@media (max-width: 375px) {
    .user-stats {
        gap: 20rpx;
        padding: 15rpx 20rpx;
    }
    
    .stat-number {
        font-size: 30rpx;
    }
    
    .stat-label {
        font-size: 22rpx;
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .geren-page {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    }
    
    .function-menu,
    .content-section,
    .loading-section,
    .empty-section,
    .login-prompt-section {
        background: #2d3748;
        box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
    }
    
    .menu-text,
    .section-title,
    .item-title,
    .empty-text,
    .prompt-text {
        color: #fff;
    }
    
    .menu-icon {
        background: #4a5568;
    }
    
    .item-content .item-meta-container {
        color: #a0aec0;
    }
}
</style>